import React from "react";
import {
  SplashScreen,
  type ValueProposition,
} from "@/src/components/ui/splash-screen";
import { FileText, GitBranch, Zap, BarChart4 } from "lucide-react";
import { useTranslation } from "@/src/utils/i18n";

export function PromptsOnboarding({ projectId }: { projectId: string }) {
  const { t } = useTranslation();
  const valuePropositions: ValueProposition[] = [
    {
      title: t("pages.prompts.onboarding.decoupled.title"),
      description: t("pages.prompts.onboarding.decoupled.description"),
      icon: <FileText className="h-4 w-4" />,
    },
    {
      title: t("pages.prompts.onboarding.editModes.title"),
      description: t("pages.prompts.onboarding.editModes.description"),
      icon: <GitBranch className="h-4 w-4" />,
    },
    {
      title: t("pages.prompts.onboarding.performance.title"),
      description: t("pages.prompts.onboarding.performance.description"),
      icon: <Zap className="h-4 w-4" />,
    },
    {
      title: t("pages.prompts.onboarding.compareMetrics.title"),
      description: t("pages.prompts.onboarding.compareMetrics.description"),
      icon: <BarChart4 className="h-4 w-4" />,
    },
  ];

  return (
    <SplashScreen
      title={t("pages.prompts.onboarding.title")}
      description={t("pages.prompts.onboarding.description")}
      valuePropositions={valuePropositions}
      primaryAction={{
        label: t("pages.prompts.onboarding.createPrompt"),
        href: `/project/${projectId}/prompts/new`,
      }}
      secondaryAction={{
        label: t("common.learnMore") || "Learn More",
        href: "https://langfuse.com/docs/prompts",
      }}
    />
  );
}
